<!--
 * @Author: ybf
 * @Date: 2023-02-21 15:31:51
 * @LastEditTime: 2023-02-22 10:43:19
 * @Description: 描述
 * Copyright (c) 2023 by 慧能分享, All Rights Reserved.
-->
<template>
    <div class="realtimeData">
        <!-- <nu-col :span="24" style="height:calc(130px - 20px);">
                <nutbTitle title="实时遥测数据"></nutbTitle> -->
        <NuVerifyForm :model="formData" ref="formData" label-width="100px" class="searchForm" @searchForm="searchForm"
            :buttons="fyButtons">
            <NuformItem label="计量点名称" prop="meterName" width="auto">
                <nu-input type="text" v-model="formData.meterName" size="middle" placeholder="请输入计量点名称"></nu-input>
            </NuformItem>
            <div class="btnBox">
                <nu-button type="primary" class="searchButton" @click="searchTable">查询</nu-button>
                <!-- <nu-button type="primary" class="searchButton" @click="addTable">新增</nu-button> -->
                <nu-button class="searchButton" @click="exportTable">导出</nu-button>
            </div>
        </NuVerifyForm>
        <div class="line"></div>
        <!-- </nu-col> -->
        <!-- <nu-col :span="24" style="height: calc(100% - 130px - 20px);">
                <nutbTitle title="点表列表">
                </nutbTitle> -->
        <div style="height:35px;position: relative;padding: 0 10px;display: flex;align-items: flex-end;" class="renovateTime">
            <span class="warning_span">当前电量值为瞬时值（单位:MWH/MVarH）</span>
            <el-dropdown split-button size="medium" type="primary" @command="handleCommand" @click="renovateTimeClick"
                trigger="click" class="dropdownBtn">
                刷新
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">每15min自动刷新</el-dropdown-item>
                    <el-dropdown-item command="b">每10min自动刷新</el-dropdown-item>
                    <el-dropdown-item command="c">每5min自动刷新</el-dropdown-item>
                    <el-dropdown-item command="d">每1min自动刷新</el-dropdown-item>
                    <el-dropdown-item command="e">每30s自动刷新</el-dropdown-item>
                    <el-dropdown-item command="f">每10s自动刷新</el-dropdown-item>
                    <el-dropdown-item command="g">每5s自动刷新</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <NuTableList :showFilter="false" :columns="columns" :dataSource="dataSource" :options="options" border
            :pagination="pagination" @handleSizeChange="handleSizeChange" @handleChangePage="handleChangePage">
        </NuTableList>
        <!-- </nu-col> -->
    </div>
</template>
    
<script>
import nuCol from "@/components/base/col.vue"
import nutbTitle from "@/components/base/tableTitle.vue"
import NuVerifyForm from "@/components/verify-form"
import NuformItem from "@/components/verify-form/form-item.vue"
import nuInput from "@/components/base/input"
import nuSelect from "@/components/base/select"
import nuButton from "@/components/base/button"
import NuTableList from "@/components/tableList/TableFormList"
import nuDialog from "@/components/base/dialog"
import { getToken } from "@/utils/auth";
export default {
    name: "realtimeData",
    components: { nuCol, nutbTitle, NuVerifyForm, NuformItem, nuInput, nuSelect, nuButton, NuTableList, nuDialog },
    data() {
        return {
            formData: {
                meterName: '',
            },
            fyButtons: [],
            pagination: {
                pageSize: 20,
                total: 0,
                pageNum: 1,
            },
            dialogTitle: '',
            dialogShow: false,
            columns: [
                {
                    label: '序号',
                    prop: 'ranking',
                    width: '70px',
                    render: (h, params) => {
                        return h('span', params.index + 1 + (this.pagination.pageNum - 1) * this.pagination.pageSize);
                    },
                },
                {
                    label: '计量点名称',
                    prop: 'pointName',
                },
                {
                    label: '电度量名称',
                    prop: 'mesaName',
                },
                {
                    label: '当前值',
                    prop: 'curTimeCol',
                },
                {
                    label: '单位',
                    prop: 'unit',
                },
                {
                    label: '系数',
                    prop: 'coeff',
                },
                {
                    label: '偏移量',
                    prop: 'offset',
                },
                // {
                //     label: '点状态',
                //     prop: 'pointStatus',
                //     render: (h, params) => {
                //         return h('span', params.row.status == 0 ? '正常' : '异常',);
                //     },
                // }
            ],
            dataSource: [{}],
            options: {
                'default-expand-all': true,
                'element-loading-background': 'rgba(225,239,242)',
                'element-loading-text': '数据正在加载中',
                'row-key': 'pid',
                'header-cell-style': {
                    background: 'rgba(105, 159, 209, 0.7)',
                    color: '#fff',
                    fontWeight: 'bold',
                    fontsize: '16px',
                },
                height: 'calc(100vh - 310px)',
                props: {
                    fixed: 'right'
                }
            },
            renovateTime: 15 * 60 * 1000,
            renovateTimeInterval: null
        };
    },
    created() {
    },
    mounted() {
        this.handleCommand('a')
        this.getRealTelemetrysData();
    },
    methods: {
        /**
         * 查询
         */
        searchTable() {
            this.$refs['formData'].searchForm('form');
        },
        /**
         * form组件内置查询事件
         */
        searchForm(val) {
            if (val) {
                this.getRealTelemetrysData();
            }
        },
        /**
         * 导出
         */
        exportTable() {
            this.getDownload(window.api.realTelemetrysExportFile, {
                ...this.formData
            }, `实时遥测数据.xlsx`)
        },
        /**
         * 每页条数变化事件
         */
        handleSizeChange(val) {
            this.pagination.pageNum = 1;
            this.pagination.pageSize = val;
            this.getRealTelemetrysData();
        },
        /**
         * 改变分页触发事件
         */
        handleChangePage(val) {
            this.pagination.pageNum = val;
            this.getRealTelemetrysData();
        },
        /**
         * 下拉菜单指令
         * @param {*} command 
         */
        handleCommand(command) {
            let timeObj = {
                a: 15 * 60 * 1000,
                b: 10 * 60 * 1000,
                c: 5 * 60 * 1000,
                d: 60 * 1000,
                e: 30 * 1000,
                f: 10 * 1000,
                g: 5 * 1000,
            }
            this.renovateTime = timeObj[command]
            if (this.renovateTimeInterval) {
                clearInterval(this.renovateTimeInterval)
            }
            this.renovateTimeInterval = setInterval(() => {
                this.getRealTelemetrysData()
            }, this.renovateTime)
        },
        /**
         * 刷新
         */
        renovateTimeClick() {
            this.getRealTelemetrysData()
        },
        /**
         * dialogFormData组件内置提交事件
         */
        diaSubmitForm(val) {
            if (val) {
                if (this.dialogTitle == '编辑') {
                    this.editStationTableData()
                } else if (this.dialogTitle == '新增') {
                    this.addStationTableData()
                }
            }
        },
        /**
         * 获取表格数据
         */
        getRealTelemetrysData() {
            let postData = {
                ...this.formData,
                ...this.pagination,
            };
            for (let k in postData.query) {
                if (postData.query[k] && Object.prototype.toString.call(postData.query[k]) == '[object String]') {
                    postData.query[k] = postData.query[k].toString().trim();
                }
            }
            this.dataSource = [];
            this.$httpGet(window.api.getRealTelemetrys, postData).then(res => {
                if (res.code == 200) {
                    this.pagination.total = res.total;
                    this.dataSource = res.realTelemetrys;
                    this.diaClose()
                } else {
                }
            }).catch(err => {

            });
        },
        beforeDestroy() {
            if (this.renovateTimeInterval) {
                clearInterval(this.renovateTimeInterval)
            }
        },

    }
};
</script>
    
<style scoped lang="scss">
.realtimeData {
    height: 100%;
}

.searchForm {
    // height: calc(100% - 40px);
    display: flex;
    // align-items: center;
    position: relative;
    flex-wrap: wrap;
    padding-right: 160px;
}

.submitForm {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.btnBox {
    display: flex;
    // float: right;
    z-index: 10;
    position: absolute;
    // top: 15px;
    right: 10px;
    margin: 10px 0 0 0;
}

.dialogHeaderSearch {
    background-color: var(--model-bgc);
    padding: 10px;
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: right;
}

::v-deep .el-upload {
    width: 100%;

    .el-upload-dragger {
        width: auto;
    }
}

::v-deep .el-dropdown {
    position: absolute;
    right: 10px;
    top: 2px;
}

::v-deep .el-button--primary {
    background-color: rgba(71, 99, 255, 1);
    border-color: rgba(71, 99, 255, 1);
}

.dropdownBtn ::v-deep .el-button-group .el-button--primary {
    height: 32px;
}

.warning_span {
    font-size: 13px;
    // font-weight: 600;
    color: #F44336;
    margin: 0 10px;
    vertical-align: middle;
}
</style>
    
    